<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>区域信息管理</title>
	<meta name="decorator" content="default"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/jeesite/areainfo/css/areainfo.css">
	<%--<script type="text/javascript" src="${pageContext.request.contextPath}/jeesite/areainfo/js/echartsExample.js"></script>--%>
	<%--<script type="text/javascript" src="${pageContext.request.contextPath}/jeesite/areainfo/js/echartsHome.js"></script>--%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jeesite/areainfo/js/echarts/echarts.min.js"></script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/area_info/areaInfo/">区域信息列表</a></li>
		<li class="active"><a href="${ctx}/area_info/areaInfo/form?id=${areaInfo.id}">分时段统计</a></li>
	</ul><br/>

	<div class="datarun" style="left: 45%;margin-top: 10px;position: absolute;z-index: 999999999999;">
		<label style="font-size: 17px;"><input type="radio" name="datarun" checked="true"/> 周</label>
		<label style="font-size: 17px;"><input type="radio" name="datarun" /> 月</label>
		<label style="font-size: 17px;"><input type="radio" name="datarun" /> 年</label>
	</div>
	<div id="main" style="width: 900px;height:550px;float: left;padding: 10px 15% 0px 15%;"></div>

	<script type="text/javascript">
		//加载一中的车位变化
		$.ajax({
			url:"daydate",
			type:"post",
			async:true,
			success:function (data) {
				console.log(data);
				var arrdate=[];

				for (var i=0;i<8;i++){
						arrdate.push(data[i].areaName);
				}
				var myChart = echarts.init(document.getElementById('main'));
				option = {
					title : {
						text: '服务区车位变化',
						subtext: '阳澄湖服务区车位'
					},
					tooltip : {
						trigger: 'axis'
					},
					// legend: {
					// 	data:['A区间','B区间']
					// },
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							magicType : {show: true, type: ['line', 'bar']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['0-2点','3-5点','6-8点','9-11点','12-14点','15-17点','18-20点','21-23点']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisLabel : {
								formatter: '{value} %'
							}
						}
					],
					series : [
						{
							name:'区间',
							type:'line',
							data:arrdate,
							markPoint : {
								data : [
									{type : 'max', name: '最大值'},
									{type : 'min', name: '最小值'}
								]
							},
							markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						},
						// {
						// 	name:'B区间',
						// 	type:'line',
						// 	data:arrdate,
						// 	markPoint : {
						// 		data : [
						// 			{type : 'max', name: '最大值'},
						// 			{type : 'min', name: '最小值'}
						// 		]
						// 	},
						// 	markLine : {
						// 		data : [
						// 			{type : 'average', name: '平均值'}
						// 		]
						// 	}
						// }
					]
				};
				myChart.setOption(option);
				},
			error:function () {
				showTips("网络问题，请检查在刷新",3);
			}
		});

		// 基于准备好的dom，初始化echarts实例

		// var moth = echarts.init(document.getElementById('moth'));

		// 指定图表的配置项和数据

		//  一个月
		/*option1 = {
			title : {
				text: '服务区车位变化',
				subtext: '阳澄湖服务区车位'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['峰值']
			},
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : ['周一','周二','周三','周四','周五','周六','周日']
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} 辆'
					}
				}
			],
			series : [
				{
					name:'最高峰',
					type:'line',
					data:[0, 5, 15, 9, 12, 7, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				},

			]
		};

*/
		// 使用刚指定的配置项和数据显示图表。

		// moth.setOption(option1);
	</script>
</body>
</html>